<?php
$form = $this->beginWidget('PsActiveForm', array(
	'id' => 'create-template-form',
	'enableAjaxValidation' => false,
	'htmlOptions' => array(
		'class' => 'form'
	)
		));
?>
<div class="section">
	<div class="block">
		<h2>Information</h2>
		<table class="form-table">
			<tr>
				<th scope="row" width="100" class="align-right">
					<?php echo $form->labelEx($template, 'name', array('label' => 'Template Name')); ?>
				</th>
				<td>
					<?php echo $form->textField($template, 'name', array('size' => 45)); ?>
					<?php echo $form->error($template, 'name'); ?>
				</td>
			</tr>
			<tr>
				<th scope="row" width="100" class="align-right">
					<?php echo $form->labelEx($template, 'type', array('label' => 'Template Type')); ?>
				</th>
				<td>
					<?php echo $form->dropDownList($template, 'type', Template::getTemplateTypes(), array('prompt' => '')); ?>
					<?php echo $form->error($template, 'type'); ?>
				</td>
			</tr>
		</table>
	</div>
</div>
<div class="section">
	<div class="block">
		<h2>Page Settings</h2>
		<table class="form-table">
			<tr>
				<th scope="row" width="100" class="align-right">Page Size</th>
				<td>
					<?php
					echo $form->dropDownList($template, 'settings[pageSize]', array(
						'A4' => 'A4'
					));
					?>
				</td>
			</tr>
			<tr>
				<th scope="row" width="100" class="align-right">Page Orientation</th>
				<td>
					<?php
					echo $form->dropDownList($template, 'settings[pageOrientation]', array(
						'Portrait' => 'Portrait',
						'Landscape' => 'Landscape',
					));
					?>
				</td>
			</tr>
			<tr>
				<th scope="row" width="100" class="align-right">Margins</th>
				<td>
					<div class="form-table-block">
						<label>Top</label>
						<?php echo $form->textField($template, 'settings[marginTop]', array('size' => '5')); ?> mm
					</div>
					<div class="form-table-block">
						<label>Left</label>
						<?php echo $form->textField($template, 'settings[marginLeft]', array('size' => '5')); ?> mm
					</div>						
					<div class="form-table-block">
						<label>Bottom</label>
						<?php echo $form->textField($template, 'settings[marginBottom]', array('size' => '5')); ?> mm
					</div>						
					<div class="form-table-block">
						<label>Right</label>
						<?php echo $form->textField($template, 'settings[marginRight]', array('size' => '5')); ?> mm
					</div>						
				</td>
			</tr>
		</table>
	</div>
</div>
<div class="section">
	<div class="block">
		<h2>Design</h2>
		<table class="form-table">
			<tr>
				<td>
					<strong>Body</strong>
					<?php
					echo $form->textArea($template, 'pages_html', array(
						'rows' => '20',
						'style' => 'width: 100%'
					));
					?>
					<?php
//					$this->widget('common.lib.redactor.ImperaviRedactorWidget', array(
//						'model' => $template,
//						'attribute' => 'pages_html',
//						'options' => array(
//							'convertDivs' => false,
//							'buttons' => array('html', '|', 'formatting', 'fontcolor', 'backcolor', 'alignment', '|',
//								'bold', 'italic', 'underline', 'deleted', '|',
//								'unorderedlist', 'orderedlist', 'outdent', 'indent', '|',
//								'table', '|',
//								'horizontalrule', 'clips'
//							)
//						),
//						'plugins' => array(
//							'clips' => array(
//								'css' => array('clips.css',),
//								'js' => array('clips.js',),
//								// add depends packages
//								'depends' => array('imperavi-redactor'),
//							),
//						),
//						'htmlOptions' => array(
//							'cols' => '40'
//						)
//					));
//					?>
					<?php echo $form->error($template, 'pages_html'); ?>
				</td>
			</tr>
			<tr>
				<td>
					<strong>Header</strong>
					<?php
					$this->widget('common.lib.redactor.ImperaviRedactorWidget', array(
						'model' => $template,
						'attribute' => 'header_html',
						'options' => array(
							'convertDivs' => false,
							'buttons' => array('html', '|', 'formatting', 'fontcolor', 'backcolor', 'alignment', '|',
								'bold', 'italic', 'underline', 'deleted', '|',
								'unorderedlist', 'orderedlist', 'outdent', 'indent', '|',
								'table', '|',
								'horizontalrule', 'clips'
							)
						),
						'plugins' => array(
							'clips' => array(
								'css' => array('clips.css',),
								'js' => array('clips.js',),
								// add depends packages
								'depends' => array('imperavi-redactor'),
							),
						),
						'htmlOptions' => array(
							'cols' => '40'
						)
					));
					?>
					<?php echo $form->error($template, 'header_html'); ?>
				</td>
			</tr>
			<tr>
				<td>
					<div class="form-table-block">
						<label>Header Background color</label>
						<?php echo $form->textField($template, 'settings[headerBgColor]'); ?>
					</div>
					<div class="form-table-block">
						<label>Header Border</label>
						<?php echo $form->textField($template, 'settings[headerBorder]'); ?>
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<strong>Footer</strong>
					<?php
					$this->widget('common.lib.redactor.ImperaviRedactorWidget', array(
						'model' => $template,
						'attribute' => 'footer_html',
						'options' => array(
							'convertDivs' => false,
							'buttons' => array('html', '|', 'formatting', 'fontcolor', 'backcolor', 'alignment', '|',
								'bold', 'italic', 'underline', 'deleted', '|',
								'unorderedlist', 'orderedlist', 'outdent', 'indent', '|',
								'table', '|',
								'horizontalrule', 'clips'
							)
						),
						'plugins' => array(
							'clips' => array(
								'css' => array('clips.css',),
								'js' => array('clips.js',),
								// add depends packages
								'depends' => array('imperavi-redactor'),
							),
						),
						'htmlOptions' => array(
							'cols' => '40'
						)
					));
					?>
					<?php echo $form->error($template, 'footer_html'); ?>
				</td>
			</tr>
			<tr>
				<td>
					<div class="form-table-block">
						<label>Footer Background color</label>
						<?php echo $form->textField($template, 'settings[footerBgColor]'); ?>
					</div>
					<div class="form-table-block">
						<label>Footer Border</label>
						<?php echo $form->textField($template, 'settings[footerBorder]'); ?>
					</div>
				</td>
			</tr>
		</table>
	</div>
</div>
<div class="form_buttons">
	<?php echo GxHtml::submitButton('Save Template', array('class' => 'link-button green no-margin', 'name' => '')); ?>
	<a href="<?php echo $this->createUrl('templates'); ?>" class="link-button no-margin">Cancel</a>
</div>
<?php $this->endWidget(); ?>
<!-- Clips Modal HTML -->        
<div id="clipsmodal" style="display: none;">
	<div id="redactor_modal_content">
		<div class="redactor_modal_box">
			<ul class="redactor_clips_box">
				<li>
					<a href="#" class="redactor_clip_link">Agency Logo</a>
					<div class="redactor_clip" style="display: none;">
						{{{Agency.getLogoImage}}}
					</div> 
				</li>
				<li>
					<a href="#" class="redactor_clip_link">Agency Name</a>
					<div class="redactor_clip" style="display: none;">
						{{Agency.name}}
					</div> 
				</li>
				<li>
					<a href="#" class="redactor_clip_link">Agency Address</a>
					<div class="redactor_clip" style="display: none;">
						{{Agency.address_formatted}}
					</div> 
				</li>
				<li>
					<a href="#" class="redactor_clip_link">Agency License No</a>
					<div class="redactor_clip" style="display: none;">
						{{Agency.registration_number}}
					</div> 
				</li>
				<li>
					<a href="#" class="redactor_clip_link">Agency Telephone</a>
					<div class="redactor_clip" style="display: none;">
						{{Agency.phone}}
					</div> 
				</li>
				<li>
					<a href="#" class="redactor_clip_link">Agency Fax</a>
					<div class="redactor_clip" style="display: none;">
						{{Agency.fax}}
					</div> 
				</li>
				<li>
					<a href="#" class="redactor_clip_link">Default Floorplan Template</a>
					<div class="redactor_clip" style="display: none;">
						<h1>{{UnitType.name}}</h1>
						{{#UnitType.floorplans}}
						<div style="width: 200mm; height: 210mm; text-align: center; page-break-after: always;">
							<img src="{{getImageUrl}}" alt="{{getImageUrl}}" style="height: 190mm;"><br>
							<h3><br>{{name}}</h3>
						</div>
						{{/UnitType.floorplans}}

					</div>
				</li>
				<li>
					<a href="#" class="redactor_clip_link">Project Cover Photo</a>
					<div class="redactor_clip" style="display: none;">{{{Project.getCoverPhotoImage}}}</div>
				</li>
				<li>
					<a href="#" class="redactor_clip_link">Project Description</a>
					<div class="redactor_clip" style="display: none;">{{{Project.description}}}</div>
				</li>
				<li>
					<a href="#" class="redactor_clip_link">Project Name</a>
					<div class="redactor_clip" style="display: none;">{{Project.name}}</div>
				</li>
				<li>
					<a href="#" class="redactor_clip_link">Project Typical Floorplan</a>
					<div class="redactor_clip" style="display: none;"><img alt="{{Project.typicalFloorplan.getImageUrl}}" src="{{Project.typicalFloorplan.getImageUrl}}" style="width: 120mm;" /></div>
				</li>
				<li>
					<a href="#" class="redactor_clip_link">Grid 50/50</a>
					<div class="redactor_clip" style="display: none;">
						<div style="display: table; width: 100%;"  class="redactor_clip_table">
							<div style="display: table-cell; width:50%; padding: 0.5em; vertical-align: top;" class="redactor_clip_table_cell">Left Column</div>
							<div style="display: table-cell; width:50%; padding: 0.5em; vertical-align: top;" class="redactor_clip_table_cell">Right Column</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<div id="redactor_modal_footer">
		<a href="#" class="redactor_modal_btn redactor_btn_modal_close">Close</a>
	</div>
</div>    